<template>
	<view class="place-order">
		<view class="top-img">
			<image class="img" src="../../static/image/bg.png"></image>
			<view class="qr-code" @click="preview(imageCode, [{url: imageCode}])" v-if="imageCode">
				<image class="img" :src="imageCode"></image>
			</view>
		</view>
		<view class="list-wrap">
			<view class="list-item">
				<view class="item-title">
					<text class="name">{{ form.workName }}</text>
					<text class="price">{{ form.salary }}</text>
				</view>
				<view class="item-con">
					<view class="con-row">
						<text class="txt">具体要求：</text>
						<view class="txt-con">
							{{ form.remark }}
						</view>
					</view>
					<view class="con-row space-between">
						<view class="row-item">
							<u-icon class="ico" name="clock" size="24"></u-icon>
							开工时间：
							<text class="light">{{ form.startTime | formatNow }}</text>
						</view>
					</view>
					<view class="con-row">
						<view class="row-item">
							<u-icon class="ico" name="map" size="24"></u-icon>
							工作地址：
							<template v-if="show">
								<text class="light">{{ form.address }}</text>
								<text v-if="form.compName">({{ form.compName }})</text>
								<u-button class="btn" :custom-style="customStyle2" type="primary" size="medium" @click="openLocation"><u-icon class="ico" name="map" size="24"></u-icon>导航</u-button>
							</template>
							<text v-else>将会在{{ showTime | formatHm }}显示</text>
						</view>
					</view>
					<view class="con-row">
						<view class="row-item">
							<u-icon class="ico" name="phone" size="24"></u-icon>
							联系电话：
							<text v-if="show" class="blue" @click="makePhone(form.mobile)">{{ form.mobile }}</text>
							<text v-else>将会在{{ showTime | formatHm }}显示</text>
						</view>
					</view>
				</view>
				<view class="img-box">
					<image class="img" v-for="(img, index) in form.atthUrls" :key="index" :src="img.url" @click="preview(img.url, form.atthUrls)"></image>
				</view>
			</view>
			<view class="btn-wrap">
				<u-button shape="circle" type="error" @click="arrive" :disabled="form.status == 'YWC'">到达工作地点</u-button>
			</view>
			<view class="tips">
				在<text class="light">{{ start | formatHm }}-{{ end | formatHm }}</text>之间到达工作地点按此按钮，退回押金。           
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'placeOrder', // 我的接单
	data() {
		return {
			customStyle: {
				background: '#e04110',
				'border-color': '#e04110',
				'color': '#fff'
			},
			customStyle2: {
				'font-size': '24rpx',
				'padding': '0 20rpx',
				'height': '45rpx'

			},
			form: {
				id: '',
				workName: '',
				salary: '',
				remark: '',
				startTime: '',
				compName: '',
				address: '',
				latitude: 77,
				longitude: 77,
				mobile: '',
				atthUrls: [],
				status: '',
			},
			nowDt: '', // 当前系统时间
			start: '', // 退押金开始时间
			end: '', // 退押金结束时间
			showTime: '',
			loading: false,
			show: false,
			imageCode: '',
		}
	},
	computed: {
		...mapState({
			userId: state => state.userId
		})
	},
	onLoad(e) {
		this.form.id = e.id;
		this.queryDetail();
		this.generateCode();
	},
	onPullDownRefresh() {
		this.queryDetail();
	},
	methods: {
		queryDetail() { // 查询明细
			return new Promise((resolve, reject) => {
				let params = {
					id: this.form.id
				}
				this.$u.api.postGetOrderInfo(params).then(res => {
					if(res.code == 1000) {
						let data = res.data;
						if(data) {
							this.form.workName = data.workName;
							this.form.salary = data.salary;
							this.form.remark = data.remark;
							this.form.startTime = data.startTime;
							this.form.compName = data.compName;
							this.form.address = data.address;
							this.form.latitude = data.latitude;
							this.form.longitude = data.longitude;
							this.form.mobile = data.mobile;
							this.form.atthUrls = data.atthUrls;
							this.form.status = data.status;
							
							this.nowDt = data.nowDt;
							if(this.nowDt) {
								this.start = this.form.startTime - (1000*60*10);
								this.end = this.form.startTime + (1000*60*10);
								
								this.showTime = this.form.startTime - (1000*60*90);
							}
							
							// 工作地点和联系电话 提前90分钟显示
							if(this.nowDt >= (this.form.startTime - (1000*60*90))) {
								this.show = true;
								
							}
							
							uni.stopPullDownRefresh();
							
							resolve();
						}
					}
				}).catch(error => {
					reject();
				})
			})
		},
		makePhone(num) { // 打电话
			uni.makePhoneCall({
				phoneNumber: num
			})
		},
		openLocation() { // 打开地图
			uni.openLocation({
				latitude: this.form.latitude,
				longitude: this.form.longitude
			})
		},
		arrive() { // 到达地点
			this.queryDetail().then(() => {
				if(this.nowDt >= this.start && this.nowDt <= this.end) {
					this.loading = true;
					uni.getLocation({
						success: res => {
							console.log('定位地址：', res);
							let params = {
								id: this.form.id,
								longitudes: res.longitude,
								latitudes: res.latitude,
							}
							this.$u.api.postArrive(params).then(res => {
								if(res.code === 1000) {
									this.$u.toast('签到成功！')
								}
								this.loading = false;
							}).catch(error => {
								this.loading = false;
							})
						},
						fail: () => {
							this.loading = false;
							this.$u.toast('获取位置失败，请打开GPS并授权位置权限！');
						}
					})
				}
				
				if(this.nowDt < this.start) {
					this.$u.toast('未到开始时间，不能签到！');
				}
				
				if(this.nowDt > this.end) {
					this.$u.toast('已超时，不能签到！');
				}
			})
		},
		generateCode() {
			let userId = uni.getStorageSync('userId');
			let params = {
				busiType: 1,
				busiId: userId + ',GG',
				url: 'pages/index/index'
		
			}
			this.$u.api.postGenerateQrCode(params).then(res => {
				if (res.code == 1000) {
					this.imageCode = res.data;
				}
			})
		},
		preview(url, urls) {
			uni.previewImage({
				current: url,
				urls: urls.map(item => item.url)
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.place-order {
	.top-img {
		position: relative;
		width: 750rpx;
		height: 333rpx;
	
		.img {
			width: 100%;
			height: 100%;
		}
	
		.qr-code {
			position: absolute;
			left: 55rpx;
			top: 90rpx;
			width: 142rpx;
			height: 142rpx;
			border: 6rpx solid;
			border-image: radial-gradient(circle, rgba(242, 142, 38, 1), rgba(253, 100, 79, 1)) 6 6;
			box-shadow: 0px 3rpx 7rpx 0px rgba(176, 55, 33, 0.35);
	
			.img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.list-wrap {
		padding: 20rpx;
		.list-item {
			padding: 30rpx 20rpx;
			background: #fff;
			box-shadow:0px 3px 7px 0px rgba(218, 218, 218, 0.35);
			border-radius:6px;
			margin-bottom: 20rpx;
			.item-title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;
				.name {
					font-size: 30rpx;
					font-weight:bold;
					color:rgba(101,101,101,1);
				}
				.price {
					font-size:26rpx;
					font-weight:bold;
					color:rgba(236,71,21,1);
				}
			}
			.item-con {
				.con-row {
					display: flex;
					font-size:24rpx;
					font-weight:500;
					color:rgba(101,101,101,1);
					line-height:34rpx;
					margin-bottom: 18rpx;
					.txt {
						flex: none;
						margin-right: 10rpx;
					}
					.txt-info {
						flex: 1;
					}
					.row-item {
						color: #999999;
						.ico {
							margin-right: 10rpx;
						}
						.btn {
							display: inline-block;
							margin-left: 10rpx;
						}
					}
				}
			}
			.img-box {
				.img {
					width: 90rpx;
					height: 90rpx;
					border-radius:6px;
					margin-right: 10rpx;
				}
			}
		}
		.tips {
			font-size:24rpx;
			font-weight:500;
			color:rgba(153,153,153,1);
			text-align: center;
			margin-top: 26rpx;
		}
		.light {
			color: #333;
			margin: 0 6rpx;
		}
		.blue {
			color: #007AFF;
			margin: 0 6px;
		}
	}
}
</style>
